<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Meta -->
  <meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
  <meta name="author" content="ruyangit@163.com">
  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="../assets/img/favicon.png">
  <!-- Title -->
  <title>Tangdao Responsive Bootstrap 4 Dashboard Template</title>

  <!-- Lib css -->
  <link href="../lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
  <link href="../lib/prismjs/themes/prism-vs.css" rel="stylesheet">
  
  

  <!-- Tangdao CSS -->
  <link rel="stylesheet" href="../assets/css/tangdao.css">
  <link rel="stylesheet" href="../assets/css/tangdao.component.css">
  <link rel="stylesheet" href="../assets/css/tangdao.demo.css">
  <link rel="stylesheet" href="../assets/css/skin.gradient.css">

</head>

<body class="app-component">
  <header class="navbar navbar-header navbar-header-fixed">
    <a href="" id="mainMenuOpen" class="burger-menu"><i data-feather="menu"></i></a>
    <a href="" id="componentContentHide" class="burger-menu d-none"><i data-feather="arrow-left"></i></a>
    <div class="navbar-brand">
      <a href="../index.html" class="td-logo">Tangdao<span class="mg-l-5">Design</span></a>
    </div><!-- navbar-brand -->
    <div id="navbarMenu" class="navbar-menu-wrapper">
      <div class="navbar-menu-header">
        <a href="../index.html" class="td-logo">Tangdao<span class="mg-l-5">Design</span></a>
        <a id="mainMenuClose" href=""><i data-feather="x"></i></a>
      </div><!-- navbar-menu-header -->
      <ul class="nav navbar-menu">
        <li class="nav-label pd-l-20 pd-lg-l-25 d-lg-none">Main Navigation</li>
        <li class="nav-item "><a href="../docs.html" class="nav-link"><i data-feather="book-open"></i> 文档</a></li>
        <li class="nav-item active"><a href="../components/index.html" class="nav-link"><i data-feather="box"></i> 组件</a></li>
        <li class="nav-item "><a href="../collections/index.html" class="nav-link"><i data-feather="package"></i> 资源</a></li>
        <li class="nav-item "><a href="../templates/index.html" class="nav-link"><i data-feather="layers"></i> 模板</a></li>
      </ul>
    </div><!-- navbar-menu-wrapper -->
    <div class="navbar-right">
      <a href="javascript:;" class="search-link" id="navbarSearch"><i data-feather="search"></i></a>
      <div class="dropdown dropdown-notification mg-l-15-f">
        <a href="javascript:;" class="dropdown-link new-indicator" data-toggle="dropdown">
          <i data-feather="bell"></i>
          <span>2</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <div class="dropdown-header">通知</div>
          <a href="" class="dropdown-item">
            <div class="media">
              <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
              <div class="media-body mg-l-15">
                <p>版本更新 <strong>1.0.2</strong> 文档布局调整</p>
                <span>Mar 15 12:32pm</span>
              </div><!-- media-body -->
            </div><!-- media -->
          </a>
          <a href="" class="dropdown-item">
            <div class="media">
              <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
              <div class="media-body mg-l-15">
                <p>版本更新 <strong>1.0.1</strong> 文档布局调整</p>
                <span>Mar 15 12:32pm</span>
              </div><!-- media-body -->
            </div><!-- media -->
          </a>
          <a href="" class="dropdown-item">
            <div class="media">
              <div class="avatar avatar-sm avatar-online"><img src="https://via.placeholder.com/350" class="rounded-circle" alt=""></div>
              <div class="media-body mg-l-15">
                <p>版本更新 <strong>1.0.0</strong> 文档布局调整</p>
                <span>Mar 15 12:32pm</span>
              </div><!-- media-body -->
            </div><!-- media -->
          </a>
          <div class="dropdown-footer"><a href="">View all Notifications</a></div>
        </div><!-- dropdown-menu -->
      </div><!-- dropdown -->

      <a href="https://gitee.com/ruyangit/tangdao-design" class="mg-l-20"><div class="pd-8 tx-white tx-white-8" ><i data-feather="github" class="wd-20 ht-20"></i></div></a>
    </div><!-- navbar-right -->

    <div class="navbar-search">
      <div class="navbar-search-header">
        <input type="search" class="form-control" placeholder="Type and hit enter to search...">
        <button class="btn"><i data-feather="search"></i></button>
        <a id="navbarSearchClose" href="" class="link-03 mg-l-5 mg-lg-l-10"><i data-feather="x"></i></a>
      </div><!-- navbar-search-header -->
      <div class="navbar-search-body">
        <label class="tx-10 tx-medium tx-uppercase tx-spacing-1 tx-color-03 mg-b-10 d-flex align-items-center">Recent Searches</label>
        <ul class="list-unstyled">
          <li><a href="index.html">modern dashboard</a></li>
          <li><a href="../components/modal.html">modal examples</a></li>
          <li><a href="../components/el-avatar.html">avatar</a></li>
        </ul>
      </div><!-- navbar-search-body -->
    </div><!-- navbar-search -->
  </header><!-- navbar -->
  <div class="component-wrapper">
    <div class="component-navleft">
      <nav class="nav flex-column">
          <a href="#tab-layout" class="nav-link  " data-toggle="tab">
              <span data-toggle="tooltip" title="Browse Components" data-placement="right"><i data-feather="layout"></i></span>
          </a>
          <a href="#tab-grid" class="nav-link  " data-toggle="tab">
              <span data-toggle="tooltip" title="Grid System" data-placement="right"><i data-feather="grid"></i></span>
          </a>
          <a href="#tab-util" class="nav-link  " data-toggle="tab">
              <span data-toggle="tooltip" title="Utilities" data-placement="right"><i data-feather="package"></i></span>
          </a>
          <a href="#tab-element" class="nav-link  active" data-toggle="tab">
              <span data-toggle="tooltip" title="UI Elements" data-placement="right"><i data-feather="layers"></i></span>
          </a>
          <a href="#tab-form" class="nav-link  " data-toggle="tab">
              <span data-toggle="tooltip" title="Forms" data-placement="right"><i data-feather="inbox"></i></span>
          </a>
          <a href="#tab-chart" class="nav-link  " data-toggle="tab">
              <span data-toggle="tooltip" title="Charts" data-placement="right"><i data-feather="pie-chart"></i></span>
          </a>
      </nav>
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      <div class="component-sidebar-header">
          <i data-feather="search"></i>
          <div class="search-form">
              <input type="search" class="form-control" placeholder="Search components">
          </div>
      </div><!-- component-sidebar-header -->
      <div class="component-sidebar-body">
          <div class="tab-content">
              <div id="tab-layout" class="tab-pane fade ">
                  <div class="pd-y-20 pd-x-10 component-list">
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./index.html">
                              <h6 class="tx-13 mg-b-3">Introduction</h6>
                              <span class="tx-12">介绍</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="../collections/modals.html">
                              <h6 class="tx-13 mg-b-3">Modals</h6>
                              <span class="tx-12">窗口示例</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                  </div><!-- component-list -->
              </div><!-- tab-pane -->
              <div id="tab-grid" class="tab-pane fade ">
                  <div class="pd-y-20 pd-x-10 component-list">
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./grid.html">
                              <h6 class="tx-13 mg-b-3">Grid System</h6>
                              <span class="tx-12">布局、栅格、后台布局</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                  </div><!-- component-list -->
              </div><!-- tab-pane -->
              <div id="tab-util" class="tab-pane fade ">
                  <div class="pd-y-20 pd-x-10 component-list">
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-animation.html">
                              <h6 class="tx-13 mg-b-3">Animation</h6>
                              <span class="tx-12">动画库</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-background.html">
                              <h6 class="tx-13 mg-b-3">Background</h6>
                              <span class="tx-12">背景、颜色</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-border.html">
                              <h6 class="tx-13 mg-b-3">Border</h6>
                              <span class="tx-12">边线</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-display.html">
                              <h6 class="tx-13 mg-b-3">Display</h6>
                              <span class="tx-12">展示</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-divider.html">
                              <h6 class="tx-13 mg-b-3">Divider</h6>
                              <span class="tx-12">分割</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-flex.html">
                              <h6 class="tx-13 mg-b-3">Flex</h6>
                              <span class="tx-12">布局</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-height.html">
                              <h6 class="tx-13 mg-b-3">Height</h6>
                              <span class="tx-12">高度</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-margin.html">
                              <h6 class="tx-13 mg-b-3">Margin</h6>
                              <span class="tx-12">外边距</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-padding.html">
                              <h6 class="tx-13 mg-b-3">Padding</h6>
                              <span class="tx-12">内边距</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-position.html">
                              <h6 class="tx-13 mg-b-3">Position</h6>
                              <span class="tx-12">位置</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-typography.html">
                              <h6 class="tx-13 mg-b-3">Typography</h6>
                              <span class="tx-12">排版</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-width.html">
                              <h6 class="tx-13 mg-b-3">Width</h6>
                              <span class="tx-12">宽度</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./util-extras.html">
                              <h6 class="tx-13 mg-b-3">Extras</h6>
                              <span class="tx-12">扩展</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                  </div><!-- component-list -->
              </div><!-- tab-pane -->
              <div id="tab-element" class="tab-pane fade active show">
                  <div class="pd-y-20 pd-x-10 component-list">
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-accordion.html">
                              <h6 class="tx-13 mg-b-3">Accordion</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-alerts.html">
                              <h6 class="tx-13 mg-b-3">Alerts</h6>
                              <span class="tx-12">警告提示</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-avatar.html">
                              <h6 class="tx-13 mg-b-3">Avatar</h6>
                              <span class="tx-12">头像</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-badge.html">
                              <h6 class="tx-13 mg-b-3">Badge</h6>
                              <span class="tx-12">徽标数</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-breadcrumbs.html">
                              <h6 class="tx-13 mg-b-3">Breadcrumbs</h6>
                              <span class="tx-12">面包屑</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-buttons.html">
                              <h6 class="tx-13 mg-b-3">Buttons</h6>
                              <span class="tx-12">按钮</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-button-groups.html">
                              <h6 class="tx-13 mg-b-3">Button Groups</h6>
                              <span class="tx-12">按钮组</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-cards.html">
                              <h6 class="tx-13 mg-b-3">Cards</h6>
                              <span class="tx-12">卡片</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-carousel.html">
                              <h6 class="tx-13 mg-b-3">Carousel</h6>
                              <span class="tx-12">走马灯</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-collapse.html">
                              <h6 class="tx-13 mg-b-3">Collapse</h6>
                              <span class="tx-12">折叠面板</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-dropdown.html">
                              <h6 class="tx-13 mg-b-3">Dropdown</h6>
                              <span class="tx-12">下拉菜单</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-icons.html">
                              <h6 class="tx-13 mg-b-3">Icons</h6>
                              <span class="tx-12">图表</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-images.html">
                              <h6 class="tx-13 mg-b-3">Images</h6>
                              <span class="tx-12">图片</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-list-group.html">
                              <h6 class="tx-13 mg-b-3">List Group</h6>
                              <span class="tx-12">列表</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-marker.html">
                              <h6 class="tx-13 mg-b-3">Marker</h6>
                              <span class="tx-12">标记</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-media-object.html">
                              <h6 class="tx-13 mg-b-3">Media Object</h6>
                              <span class="tx-12">多媒体</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-modal.html">
                              <h6 class="tx-13 mg-b-3">Modal</h6>
                              <span class="tx-12">对话框</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-navs.html">
                              <h6 class="tx-13 mg-b-3">Navs</h6>
                              <span class="tx-12">导航</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-navbar.html">
                              <h6 class="tx-13 mg-b-3">Navbar</h6>
                              <span class="tx-12">导航条</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-off-canvas.html">
                              <h6 class="tx-13 mg-b-3">Off-Canvas</h6>
                              <span class="tx-12">抽屉，画布闭合</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-pagination.html">
                              <h6 class="tx-13 mg-b-3">Pagination</h6>
                              <span class="tx-12">分页</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-placeholder.html">
                              <h6 class="tx-13 mg-b-3">Placeholder</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-popovers.html">
                              <h6 class="tx-13 mg-b-3">Popovers</h6>
                              <span class="tx-12">起爆卡片</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-progress.html">
                              <h6 class="tx-13 mg-b-3">Progress</h6>
                              <span class="tx-12">进度条</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-steps.html">
                              <h6 class="tx-13 mg-b-3">Steps</h6>
                              <span class="tx-12">步骤</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-scrollbar.html">
                              <h6 class="tx-13 mg-b-3">Scrollbar</h6>
                              <span class="tx-12">滚动条</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-scrollspy.html">
                              <h6 class="tx-13 mg-b-3">Scrollspy</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-spinners.html">
                              <h6 class="tx-13 mg-b-3">Spinners</h6>
                              <span class="tx-12">加载</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-tab.html">
                              <h6 class="tx-13 mg-b-3">Tab</h6>
                              <span class="tx-12">标签页</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-toast.html">
                              <h6 class="tx-13 mg-b-3">Toast</h6>
                              <span class="tx-12">提示</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-tooltips.html">
                              <h6 class="tx-13 mg-b-3">Tooltips</h6>
                              <span class="tx-12">文字提示</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media active">
                          <a class="media-body mg-l-10" href="./el-table-basic.html">
                              <h6 class="tx-13 mg-b-3">Table Basic</h6>
                              <span class="tx-12">基础表格</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./el-table-advanced.html">
                              <h6 class="tx-13 mg-b-3">Table Advanced</h6>
                              <span class="tx-12">高级表格</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                  </div><!-- component-list -->
              </div><!-- tab-pane -->
              <div id="tab-form" class="tab-pane fade ">
                  <div class="pd-y-20 pd-x-10 component-list">
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-elements.html">
                              <h6 class="tx-13 mg-b-3">Form Elements</h6>
                              <span class="tx-12">表单元素</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-input-group.html">
                              <h6 class="tx-13 mg-b-3">Input Group</h6>
                              <span class="tx-12">输入组</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-input-tags.html">
                              <h6 class="tx-13 mg-b-3">Input Tags</h6>
                              <span class="tx-12">标签</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-input-masks.html">
                              <h6 class="tx-13 mg-b-3">Input Masks</h6>
                              <span class="tx-12">标记</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-layouts.html">
                              <h6 class="tx-13 mg-b-3">Form Layouts</h6>
                              <span class="tx-12">表单布局</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-validation.html">
                              <h6 class="tx-13 mg-b-3">Form Validation</h6>
                              <span class="tx-12">表单验证</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-wizard.html">
                              <h6 class="tx-13 mg-b-3">Form Wizard</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-text-editor.html">
                              <h6 class="tx-13 mg-b-3">Text Editor</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-range-slider.html">
                              <h6 class="tx-13 mg-b-3">Range Slider</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-date-pickers.html">
                              <h6 class="tx-13 mg-b-3">Date Pickers</h6>
                              <span class="tx-12">日期</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-select2.html">
                              <h6 class="tx-13 mg-b-3">Select2</h6>
                              <span class="tx-12">选择框</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./form-search.html">
                              <h6 class="tx-13 mg-b-3">Search</h6>
                              <span class="tx-12">搜索框</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                  </div><!-- component-list -->
              </div><!-- tab-pane -->
              <div id="tab-chart" class="tab-pane fade ">
                  <div class="pd-y-20 pd-x-10 component-list">
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./chart-flot.html">
                              <h6 class="tx-13 mg-b-3">Flot</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./chart-js.html">
                              <h6 class="tx-13 mg-b-3">ChartJS</h6>
                              <span class="tx-12">图表</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./chart-peity.html">
                              <h6 class="tx-13 mg-b-3">Peity</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./chart-sparkline.html">
                              <h6 class="tx-13 mg-b-3">Sparkline</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                      <div class="media ">
                          <a class="media-body mg-l-10" href="./chart-morris.html">
                              <h6 class="tx-13 mg-b-3">Morris</h6>
                              <span class="tx-12">--</span>
                          </a><!-- media-body -->
                      </div><!-- media -->
                  </div><!-- component-list -->
              </div><!-- tab-pane -->
          </div><!-- tab-content -->
      </div><!-- component-sidebar-body -->
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Table Basic</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="td-title">Table Basic</h1>
        <p class="td-lead">Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap. Read the <a href="https://getbootstrap.com/docs/4.2/content/tables/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">Using the most basic table markup, here’s how <code>.table</code> based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;col&quot;&gt;ID&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Job Title&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Degree&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Salary&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
      &lt;td&gt;Adrian Monino&lt;/td&gt;
      &lt;td&gt;Front-End Engineer&lt;/td&gt;
      &lt;td&gt;Computer Science&lt;/td&gt;
      &lt;td&gt;$120,000&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
      &lt;td&gt;Socrates Itumay&lt;/td&gt;
      &lt;td&gt;Software Engineer&lt;/td&gt;
      &lt;td&gt;Computer Engineering&lt;/td&gt;
      &lt;td&gt;$150,000&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
      &lt;td&gt;Reynante Labares&lt;/td&gt;
      &lt;td&gt;Product Manager&lt;/td&gt;
      &lt;td&gt;Business Management&lt;/td&gt;
      &lt;td&gt;$250,000&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Table Head Options</h4>
        <p class="mg-b-30">Similar to tables and dark tables, use the modifier classes <code>.thead-primary</code> or <code>.thead-dark</code> to make colored head.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table mg-b-0">
              <thead class="thead-primary">
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;thead class=&quot;thead-primary&quot;&gt;...&lt;/thead&gt;</code></pre>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-40p">Class Reference</th>
                <th class="wd-60p">Color</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>class="thead-[color]"</td>
                <td>primary | secondary | success | danger | warning | info | light | dark</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section3" class="mg-b-10">Striped Rows</h4>
        <p class="mg-b-30">Use <code>.table-striped</code> to add zebra-striping to any table row within the tbody.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-striped mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-striped&quot;&gt;...&lt;/table&gt;</code></pre>


        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Bordered Table</h4>
        <p class="mg-b-30">Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-bordered mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-bordered&quot;&gt;...&lt;/table&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Hoverable Rows</h4>
        <p class="mg-b-30">Add <code>.table-hover</code> to enable a hover state on table rows within a tbody.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-hover mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-hover&quot;&gt;...&lt;/table&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Compact Table</h4>
        <p class="mg-b-30">Add <code>.table-sm</code> to make tables more compact by cutting cell padding in half.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-sm mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-sm&quot;&gt;...&lt;/table&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section7" class="mg-b-10">Colored Variations</h4>
        <p class="mg-b-30">Use contextual classes to color entire table.</p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table table-primary table-hover table-striped mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->

          <div class="table-responsive mg-t-20">
            <table class="table table-dark table-hover table-striped mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;table class=&quot;table table-[color]&quot;&gt;...&lt;/table&gt;</code></pre>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-40p">Class Reference</th>
                <th class="wd-60p">Color</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>class="table table-[color]"</td>
                <td>primary | secondary | success | danger | warning | info | light | dark</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section8" class="mg-b-10">Responsive Table</h4>
        <p class="mg-b-30">Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a <code>.table</code> with <code>.table-responsive.</code></p>

        <div data-label="Example" class="td-example demo-table">
          <div class="table-responsive">
            <table class="table mg-b-0">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Name</th>
                  <th scope="col">Job Title</th>
                  <th scope="col">Degree</th>
                  <th scope="col">Salary</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>Adrian Monino</td>
                  <td>Front-End Engineer</td>
                  <td>Computer Science</td>
                  <td>$120,000</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Socrates Itumay</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Reynante Labares</td>
                  <td>Product Manager</td>
                  <td>Business Management</td>
                  <td>$250,000</td>
                </tr>
                <tr>
                  <th scope="row">4</th>
                  <td>Hamza Macasindil</td>
                  <td>Software Engineer</td>
                  <td>Computer Engineering</td>
                  <td>$140,000</td>
                </tr>
                <tr>
                  <th scope="row">5</th>
                  <td>Roven Galeon</td>
                  <td>Project Manager</td>
                  <td>Accountancy</td>
                  <td>$160,000</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;table-responsive&quot;&gt;
  &lt;table class=&quot;table&quot;&gt;...&lt;/table&gt;
&lt;/div&gt;</code></pre>
 
<footer class="content-footer">
    <div>
        <span>&copy; 2019 Tangdao Design v1.0.0. </span>
        <span>Made by <a href="http://gitee.com/ruyangit">Ryan</a></span>
    </div>
    <div>
        <nav class="nav">
            <a href="#" class="nav-link">Licenses</a>
            <a href="../change-log.html" class="nav-link">Change Log</a>
            <a href="#" class="nav-link">Get Help</a>
        </nav>
    </div>
</footer>

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Table Head Options</a>
            <a href="#section3" class="nav-link">Striped Rows</a>
            <a href="#section4" class="nav-link">Bordered Table</a>
            <a href="#section5" class="nav-link">Hoverable Rows</a>
            <a href="#section6" class="nav-link">Compact Table</a>
            <a href="#section7" class="nav-link">Colored Variations</a>
            <a href="#section8" class="nav-link">Responsive Table</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    <!-- lib -->
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../lib/feather-icons/feather.min.js"></script>
    <script src="../lib/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="../lib/prismjs/prism.js"></script>

    <!-- tangdao -->
    <script src="../assets/js/tangdao.js"></script>
    <script src="../assets/js/tangdao.component.js"></script>

    <script>
      $(function(){
        'use strict'
  

      });
    </script>
  </body>
</html>
